<template>
  <div class="login-div">
    <div class="content">
      <div class="cover-div">
        <h3>
          在线教育平台
        </h3>
      </div>
      <div class="content-div">
        <div class="input-div">
          <el-input v-model="username" placeholder="用户" class="input" prefix-icon="el-icon-user" />
          <el-input v-model="password" placeholder="密码" :show-password="true" class="input" prefix-icon="el-icon-key" />
        </div>
        <div class="submit-div">
          <el-button type="info" plain @click="login" class="btn-submit">
            登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
          </el-button>
        </div>
        <div class="btn-div">
          <el-button type="text">获取帮助</el-button>
          <el-button type="text">注册用户</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    username:"",
    data() {
      return {
        username: "",
        password: ""
      };
    },
    mounted() {
      this.getPaper();
    },
    methods:{
      async getPaper(){
        let res = await this.$axios.attr.reqPaper(3);
        console.log(res);
      },
      login(){
        sessionStorage.setItem("username", JSON.stringify(this.username))  //缓存用户信息
        this.$router.push("index")
      }
    },
  };
</script>

<style scoped>

  .login-div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url("../assets/background.png");
    background-size: cover;
    /*background-color: rgba(2, 255, 234, 0.29);*/
  }

  .content {
    width: 420px;
    height: 430px;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
  }

  .cover-div {
    width: 100%;
    height: 35%;
    background-image: url('../assets/login4.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    letter-spacing: 10px;
  }

  .content-div {
    width: 100%;
    height: 65%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .input-div {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 15px;
  }

  .input {
    width: calc(100% - 50px);
  }

  .submit-div {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-submit {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b4049;
    color: white;
    font-size: large;
  }

  .btn-div {
    width: 80%;
    height: 20%;
    display: flex;
    justify-content: space-between;
  }

  .btn-div > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }


</style>
